<!--
 * @Description: 流程监控
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-10-12 15:20:14
 * @LastEditTime: 2023-01-17 15:42:15
 * @FilePath: \cscec-pms-admin\src\views\systemManage\workflowManagement\monitoring\index.vue
-->
<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 搜索 -->
    <searchData :search-data="searchOption" @search="search" />
    <!-- 搜索 -->
    <a-card>
      <list-table
        ref="table"
        table-layout="fixed"
        size="default"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :page-keys="['pageNum', 'pageSize', 'totalSize']"
        :alert="true"
        show-size-changer
        show-quick-jumper
        show-pagination="auto"
      >
        <span slot="taskSource" slot-scope="text">
          <ellipsis :length="8" tooltip>{{ text | taskSourceFilter }}</ellipsis>
        </span>
        <template slot="result" slot-scope="text">
          <div>
            {{ text | resultFilter }}
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <MoreButton>
            <a v-btnPermission="'sy_014_loo_01'" @click="handleDeiail(record)">查看</a>
            <a @click="handle(record)">处理</a>
            <a v-btnPermission="'sy_014_edi_02'" @click="handleSetApprover(record)">设置审批人</a>
          </MoreButton>
        </template>
      </list-table>
    </a-card>
    <!-- 设置审批人模态框 -->
    <SetApprover :visible.sync="setApproverVisible" :business-id="setApproverData.businessId" @refresh="search()" />
    <!-- 设置审批人模态框 -->
  </base-breadcrumb>
</template>
<script>
import { Ellipsis } from '@/components'
import { resultList, searchOption, columns } from './model.js'
import { getSelfAudit } from '@/api/indexPage'
import { BUSINESS_SOURCE_MAP } from '@/config/businessConfig'
import { handleAuditInList } from '@/utils/util'
import SetApprover from './components/SetApprover'
export default {
  name: 'Monitoring',
  components: {
    Ellipsis,
    SetApprover
  },
  data() {
    return {
      // 查询参数
      searchData: {},
      // 搜索选项
      searchOption,
      // 表头
      columns,
      // 运行状态(0:未结束)
      run: '0',
      // 设置审批人显示隐藏
      setApproverVisible: false,
      // 设置审批人数据
      setApproverData: {
        businessId: ''
      }
    }
  },
  filters: {
    // 事项来源过滤器
    taskSourceFilter(taskSource) {
      return BUSINESS_SOURCE_MAP[taskSource]
    },
    // 状态过滤器
    resultFilter(result) {
      return resultList[result]
    }
  },
  created() {
    this.initMessageListener()
  },
  methods: {
    /**
     * @description: 监听新窗口刷新消息
     * @return {void}
     */
    initMessageListener() {
      const handler = (e) => {
        const fromOrigin = e.origin || e.originalEvent.origin
        // 验证是否同源，避免第三方攻击
        if (fromOrigin === window.location.origin) {
          // 验证完成标志
          if (e.data === 'finish') {
            this.$refs.table.refresh(true)
          }
        }
      }
      window.addEventListener('message', handler, false)
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('message', handler)
      })
    },
    /**
     * @description: 搜索
     * @param {Object} value 搜索数据
     * @return {Void}
     */
    search(value) {
      this.searchData = value || {}
      this.$refs.table.refresh(true)
    },
    /**
     * @description: 表格数据加载方法
     * @param {Object} parameter 分页信息
     * @return {Promise} 接口Promise
     */
    async loadData(parameter) {
      try {
        console.log(parameter)
        console.log(this.searchData)
        const params = Object.assign({}, parameter, this.searchData, {
          run: this.run,
          pageNo: parameter.pageNum,
          startOrgName: this.searchData?.startOrgName || ''
        })
        return await getSelfAudit(params)
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    /**
     * @description: 查看
     * @param {object} record 行数据
     * @return {void}
     */
    handleDeiail(record) {
      let editModel = 1
      if (record.detailUrl == '/QCActivityRegistrationEdit' || record.detailUrl == '/QCActivityReportEdit') {
        editModel = 0
      }
      handleAuditInList.call(this, {
        ...record,
        processName: record.name,
        durationInMillis: record.durationTime,
        // 流程监控
        isMonitoring: 'true',
        editModel,
        orgin: 'monitoring'
      })
    },
    /**
     * @description: 处理
     * @param {object} record 行数据
     * @return {void}
     */
    handle(record) {
      localStorage.removeItem('approvalArr')
      handleAuditInList.call(this, {
        ...record,
        processName: record.name,
        durationInMillis: record.durationTime,
        // 流程监控
        isMonitoring: 'true',
        // 流程监控类型(process:处理)
        monitoringType: 'process'
      })
    },
    /**
     * @description: 设置审批人
     * @param {object} record 行数据
     * @return {void}
     */
    handleSetApprover({ businessId }) {
      this.setApproverVisible = true
      this.setApproverData.businessId = businessId
    }
  }
}
</script>
<style lang="less" scoped>
</style>
